
import 'package:flutter/material.dart';

void main() =>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
        home:HYHomePage()
    );
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("基础widget"),
      ),
      body:HYHomeContent(),
    );
  }
}

class HYHomeContent extends StatefulWidget {
  const HYHomeContent({super.key});

  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
/**
 * 编辑器快捷键配置
 * preferences>keymap>找到冲突的快捷键extract，修改快捷键
 *alt+z抽取成一个widget
 *
 */
class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    //Row/Column:继承自Flex
    //Flex:Css Flex布局。直接使用的较少
    //Axis.vertical:Column
    //Axis.horizontal:Rom

    /*
    * Row特点：
    * - 水平方向尽可能占据比较大的空间
    *   * 水平方向也是希望包裹内容，那么设置mainAxisSize = min
    * - 垂直方向包裹内容
    * mainAxisAlignment:
    * - start:主轴的开始位置挨个摆放元素
    * - end：主轴的结束位置挨个摆放元素
    * - center：主轴的中心点对齐
    * - spaceBetween:左右两边的间距为0，其他元素之间平分间距
    * - spaceAround:左右两边的间距是其他元素之间的距离一半
    * - spaceEvenly:所有的间距平分空间
    * CrossAxisAlignment:
    *  - start:交叉轴的起始位置对齐
    *  - end：交叉轴的结束位置对齐
    *  - center:中心点对齐
    *  - baseline:基线对齐(必须有文本的时候才起效果)，必须有textBaseline
    *  - stretch:先让row占据尽可能的空间，将所有的子Widget交叉轴的高度。拉伸到最大
    * */
    return RowDemo2();
    // return ButtonRowDemo();
      //return ColumnDemo();
   }
}

class ColumnDemo extends StatelessWidget {
  const ColumnDemo({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(width: 80,height: 60,color: Colors.red,child: Text("hellxo",style: TextStyle(fontSize: 20),),),
        Container(width: 120,height: 100,color: Colors.green,child: Text("Woxrld",style: TextStyle(fontSize: 30),),),
        Container(width: 120,height: 100,color: Colors.blue,child: Text("abxc",style: TextStyle(fontSize: 40),),),
        Container(width: 120,height: 100,color: Colors.yellowAccent,child: Text("abxc",style: TextStyle(fontSize: 40),),)
      ],
    );
  }
}
class RowDemo extends StatelessWidget {
  const RowDemo({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          Container(width: 80,height: 60,color: Colors.red,child: Text("hellxo",style: TextStyle(fontSize: 20),),),
          Container(width: 120,height: 100,color: Colors.green,child: Text("Woxrld",style: TextStyle(fontSize: 30),),),
          Container(width: 120,height: 100,color: Colors.blue,child: Text("abxc",style: TextStyle(fontSize: 40),),)
        ],
      ),
    );
  }
}
class RowDemo2 extends StatefulWidget {
  const RowDemo2({
    super.key,
  });

  @override
  State<RowDemo2> createState() => _RowDemo2State();
}

class _RowDemo2State extends State<RowDemo2> {
   bool _isFavor = false;

  @override
  Widget build(BuildContext context) {
   // return ExpandedDemo();
    /*
    * Stack默认的大小是包裹内容的
    * -alignment:从什么位置开始排布所有的Widget
    * -fit：expand 将子元素拉伸到尽可能大
    * -overflow:超出部分如何处理
    // * */
    // return Container(
    //   width: 300,
    //   height: 350,
    //   child: Stack(
    //     alignment: AlignmentDirectional.topEnd,
    //     fit:StackFit.expand,
    //     children: <Widget>[
    //       Image.asset("assets/images/pic.png",width: 300,fit:BoxFit.cover),
    //       Container(width: 150,height: 150,),
    //       Text("进击巨人")
    //     ],
    //   ),
    // )
    //return StackDemo();
    return Stack(
      children: <Widget>[
        Image.asset("assets/images/pic.png"),
        Positioned(
            left:0,
            right:0,
            bottom: 0,
            child: Container(
                padding:EdgeInsets.all(8),
                color: Color.fromARGB(150, 0, 0, 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('进击的巨人挺不错的',style: TextStyle(fontSize: 20,color: Colors.white,),),
                   // GestureDetector(child: Icon(Icons.favorite,color: Colors.white,),)
                    IconButton(onPressed: (){
                      setState(() {
                        _isFavor = !_isFavor;
                      });
                    }, icon: Icon(
                      Icons.favorite,
                      color:_isFavor?Colors.red :Colors.white
                    ))
                  ]
          ),
        ))
      ],
    );
  }
}

class StackDemo extends StatelessWidget {
  const StackDemo({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.bottomStart,
     // fit:StackFit.expand,
      children: <Widget>[
        Image.asset("assets/images/pic.png",width: 300,fit:BoxFit.cover),
        Container(width: 150,height: 150,color: Colors.cyan,),
        Positioned(
            right: 0,
            child: Text("进击巨人",style: TextStyle(fontSize: 20,color:Colors.orange),)
        )
      ],
    );
  }
}

class ExpandedDemo extends StatelessWidget {
  const ExpandedDemo({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          /*
          * Flexible中的属性
          * - flex
          * Expanded ->Flexibled(it:FlexFit.tight)
          * 空间分配问题：
          *
          * */
          // Flexible(
          //   fit:FlexFit.tight,
          //   flex: 1,
          //   child: Container(width: 80,height: 60,color: Colors.red,),
          // ),
          // Flexible(
          //   fit:FlexFit.tight,
          //   flex: 2,
          //   child: Container(width: 180,height: 60,color: Colors.yellowAccent,),
          // ),
          Expanded(
            flex: 1,
            child: Container(width: 80,height: 60,color: Colors.red,),
          ),
          Expanded(
            flex: 2,
            child: Container(width: 180,height: 60,color: Colors.yellowAccent,),
          ),
          Container(width: 120,height: 100,color: Colors.green,),
          Container(width: 120,height: 100,color: Colors.blue,)
        ],
      ),
    );
  }
}

class ButtonRowDemo extends StatelessWidget {
  const ButtonRowDemo({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.bug_report),
            Text("bug报告")
          ],
        ),
        onPressed: ()=>print('按钮被点击'),
    );
  }
}


